<template>
	<view>
		<view class="contenter">
			<view class="contenter_left">
				积分商城
			</view>
			<view class="contenter_right">
				<view class="contenter_right_s">
					<view class="contenter_right_s_a">
						<img style="width: 35rpx;height: 35rpx;"
							src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/1c8bd93c1335b586cf7b7b11d4e252ad82372b98.png"
							alt="">
						<text>拼团抢购</text>
					</view>
					<view class="contenter_right_s_w">
						<img style="width: 35rpx;height: 35rpx;"
							src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/1c8bd93c1335b586cf7b7b11d4e252ad82372b98.png"
							alt="">
						<text>幸运抽奖</text>
					</view>
				</view>
				<view class="contenter_right_w">
					<view class="contenter_right_w_s">
						<img style="width: 35rpx;height: 35rpx;"
							src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/1c8bd93c1335b586cf7b7b11d4e252ad82372b98.png"
							alt="">
						<text>领券中心</text>
					</view>
					<view class="contenter_right_w_t">
						<img style="width: 35rpx;height: 35rpx;"
							src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/1c8bd93c1335b586cf7b7b11d4e252ad82372b98.png"
							alt="">
						<text>砍价助手</text>
					</view>
				</view>
			</view>
		</view>

		<view class="actions">
			<view class="actions-left">
				<image src="https://niule.qfycloud.com/images/circle_read.png" mode=""></image>
				<text>10</text>
			</view>
			<view class="actions-right">
				<view class="action">
					<image src="https://niule.qfycloud.com/images/circle_coment.png" mode=""></image>
					<text>20</text>
				</view>
				<view class="action">
					<image src="https://niule.qfycloud.com/images/circle_zan.png" mode=""></image>
					<text>30</text>
				</view>
				<view class="action">
					<image src="https://niule.qfycloud.com/images/circle_share.png" mode=""></image>
					<text>40</text>
				</view>
				<view class="action">
					<image src="https://niule.qfycloud.com/images/circle_star.png" mode=""></image>
					<text>50</text>
				</view>
			</view>
		</view>

		<view class="nav">
			<view class="nav-right">
				<view class="nav-right_s">
					<image
						src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/d1/0f855263a9a08d5a667bed79d28b92.png?attname=A920ftCSJ0SNd10f855263a9a08d5a667bed79d28b92.png"
						mode=""></image>
				</view>
				<view class="nav-right_a">
					<text>456454</text>
					<text>10</text>
				</view>
			</view>

			<view class="nav-left">
				<image src="https://niule.qfycloud.com/images/circle_read.png" mode=""></image>
				<text>10</text>
			</view>
		</view>
	</view>
</template>

<script>
</script>

<style lang="less">
	.contenter {
		display: flex;
		height: 300rpx;
		width: 100%;

		.contenter_left {
			width: 30%;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: antiquewhite;
		}

		.contenter_right {
			width: 70%;
			height: 100%;
			display: flex;
			justify-content: space-between;
		}

		.contenter_right_s {
			width: 70%;
			height: 300rpx;

			.contenter_right_s_a {
				background-color: aqua;
				height: 50%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
			}

			.contenter_right_s_w {
				height: 50%;
				background-color: bisque;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
			}
		}

		.contenter_right_w {
			width: 70%;
			height: 300rpx;

			.contenter_right_w_s {
				height: 50%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				;
				background-color: blueviolet;
			}

			.contenter_right_w_t {
				height: 50%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				background-color: cadetblue;
			}
		}

	}

	.actions {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20upx;

		.actions-left {
			display: flex;
			align-items: center;
			margin-left: 30upx;

			image {
				width: 20rpx;
				height: 20rpx;
			}

		}

		.actions-right {
			display: flex;
			justify-content: space-around;
			align-items: center;
			width: 50%;

			.action {
				display: flex;
				align-items: center;

				image {
					width: 20rpx;
					height: 20rpx;
				}
			}
		}
	}

	.nav {
		display: flex;
		justify-content: space-between;
		margin-top: 40rpx;

		.nav-left {
			display: flex;
			align-items: center;

			image {
				width: 20rpx;
				height: 20rpx;
			}
		}

		.nav-right {
			display: flex;
			align-items: center;

			.nav-right_s {

				image {
					width: 60rpx;
					height: 60rpx;
				}
			}

			.nav-right_a {
				display: flex;
				flex-direction: column;
			}
		}

	}
</style>